<template>
  <el-container style="height: 100%">
    <el-header height="280px">
      <el-table
        :data="tableData"
        stripe
        height="100%"
        highlight-current-row
        @current-change="loadCurrent"
      >
        <el-table-column
          v-for="column in tableColumns"
          :key="column.code"
          :prop="column.code"
          :label="column.name"
          :width="column.width ? column.width : 100"
          :formatter="
            (row, column, cellValue, index) => {
              if (column.property === 'usage') {
                return (cellValue * 100).toFixed() + '%'
              } else {
                return cell_formatter(column, cellValue, tableColumns)
              }
            }
          "
        />
      </el-table>
    </el-header>
    <el-main>
      <el-tabs v-model="tabIndex" style="height: 100%">
        <el-tab-pane label="用料明细" name="1">
          <el-table :data="current_bill?.all_stick" height="100%">
            <el-table-column prop="length" label="长度" width="100" />
            <el-table-column prop="qty" label="需求数量" width="100" />
            <el-table-column label="操作">
              <template #default>
                <el-button
                  size="small"
                  type="primary"
                  width="100"
                  @click="make_stock_out(current_bill)"
                >
                  打印领料单
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="部件" name="2">
          <el-table :data="parts" style="width: 100%" height="100%">
            <el-table-column
              v-for="column in stick_part_define"
              :key="column.code"
              :prop="column.code"
              :label="column.name"
              :width="column.width ? column.width : 100"
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="开料过程" name="3">
          <el-radio-group v-model="length_selected">
            <el-radio-button
              v-for="propose in current_bill?.stick_propose"
              :key="propose.divide_length"
              :label="propose.divide_length"
            ></el-radio-button>
          </el-radio-group>
          <el-table
            :data="propose_proc"
            style="width: 100%; height: calc(100% - 36px)"
            height="100%"
          >
            <el-table-column
              v-for="column in stick_propose_detail_define"
              :key="column.code"
              :prop="column.code"
              :label="column.name"
              :width="column.width ? column.width : 100"
              :formatter="
                (row, column, cellValue, index) => {
                  if (column.property === 'usage') {
                    return (cellValue * 100).toFixed() + '%'
                  } else {
                    return cell_formatter(column, cellValue, stick_propose_detail_define)
                  }
                }
              "
            />
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="产生余料" name="4">
          <el-table :data="current_bill?.remainder" style="width: 100%" height="100%">
            <el-table-column
              v-for="column in t_remainder_stick_define"
              :key="column.code"
              :prop="column.code"
              :label="column.name"
              :width="column.width ? column.width : 100"
              :formatter="
                (row, column, cellValue, index) => {
                  if (column.property === 'usage') {
                    return (cellValue * 100).toFixed() + '%'
                  } else {
                    return cell_formatter(column, cellValue, t_remainder_stick_define)
                  }
                }
              "
            />
            <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="small"
                  :disabled="scope.row.balance === 0 || scope.row.length < 500"
                >
                  入库通知
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="树状图" name="5">
          <div style="padding: 30 30 30 30">
            <el-tree node-key="id" default-expand-all :data="divide_as_tree" height="100%">
              <template #default="{ data }">
                <el-tag v-if="!data.remainder_length && !data.use_remainder_id" size="small">{{
                  data.stick_length
                }}</el-tag>
                <el-tag
                  v-if="!data.remainder_length && data.use_remainder_id"
                  type="info"
                  size="small"
                  >{{ data.stick_length }}</el-tag
                >

                <div v-if="!data.remainder_length" style="margin-left: 10px">
                  投料数:{{ data.stick_qty }}
                </div>
                <div v-if="!data.remainder_length" style="padding-left: 10px">
                  开料:{{ data.divide_length }}
                </div>
                <div v-if="!data.remainder_length" style="padding-left: 10px">
                  产出:{{ data.divide_qty }}
                </div>

                <el-tag type="danger" v-if="data.remainder_length" size="small">{{
                  data.remainder_length
                }}</el-tag>
                <div v-if="data.remainder_length" style="margin-left: 10px">
                  余料:{{ data.remainder_qty }}
                </div>
              </template>
            </el-tree>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import copy from 'copy-to-clipboard'

import {
  stick_propose_group_define,
  stick_part_define,
  stick_propose_detail_define,
  t_remainder_stick_define
} from '@/meta'
import type { stick_propose_detail, stick_propose_group } from '@/types/billdata'
import type { t_remainder_stick, stick_part } from '@/types/producedata'
import { onMounted, ref, watch } from 'vue'
import { cell_formatter } from '@/utils/common'
import { ElMessageBox } from 'element-plus'
import { useDbStore } from '@/stores/modules/database'
interface t_tree {
  use_remainder_id?: string
  id?: string
  stick_length?: number
  divide_length?: number
  divide_qty?: number
  stick_qty?: number
  children?: t_tree[]
  remainder_length?: number //如果是余料，则设置下面两值
  remainder_qty?: number
}
const parts = ref<stick_part[]>([])
const length_selected = ref<number>()
const current_bill = ref<stick_propose_group>()
const tabIndex = ref<string>('1')
const tableColumns = stick_propose_group_define
const tableData = ref<stick_propose_group[]>()
const propose_proc = ref<stick_propose_detail[]>([])
const divide_as_tree = ref<t_tree[]>([])
watch(length_selected, (n, o) => {
  propose_proc.value = current_bill.value?.stick_propose.find((r) => r.divide_length === n)
    ?.details!
})
const make_stock_out = (stick_propose_group?: stick_propose_group) => {
  const text = JSON.stringify(stick_propose_group)
  copy(text)
  ElMessageBox.alert('JSON已复制到剪切板', '提示')
}
const loadCurrent = (val: stick_propose_group) => {
  current_bill.value = val
  parts.value = []
  val.stick_propose.forEach((r) => {
    r.process.forEach((s) => {
      parts.value.push(s)
    })
  })
  length_selected.value = val.stick_propose[0].divide_length
  propose_proc.value = current_bill.value?.stick_propose.find(
    (r) => r.divide_length === length_selected.value
  )?.details!
  create_tree(val)
}
const create_tree = (val: stick_propose_group) => {
  const _divide_as_tree: t_tree[] = []
  const propose_detail: stick_propose_detail[] = []
  val.stick_propose.forEach((r) =>
    r.details.forEach((s) => {
      propose_detail.push(s)
    })
  )
  propose_detail
    .filter((r) => !r.use_remainder_id)
    .forEach((r) => {
      const item: t_tree = {
        id: r.id,
        stick_length: r.stick_length,
        divide_length: r.divide_length,
        stick_qty: r.stick_qty,
        divide_qty: r.all_output,
        children: []
      }
      link_remander(item, val.remainder)
      link_sub_item(item, propose_detail, val.remainder)
      _divide_as_tree.push(item)
    })
  divide_as_tree.value = _divide_as_tree
}
const link_sub_item = (
  item: t_tree,
  propose_detail: stick_propose_detail[],
  remainder?: t_remainder_stick[]
) => {
  propose_detail
    .filter((r) => r.first_propose_detail === item.id)
    .forEach((r) => {
      const sub_item: t_tree = {
        use_remainder_id: r.use_remainder_id,
        id: r.id,
        stick_length: r.stick_length,
        divide_length: r.divide_length,
        stick_qty: r.stick_qty,
        divide_qty: r.all_output,
        children: []
      }
      item.children!.push(sub_item)
      link_remander(sub_item, remainder)
      link_sub_item(sub_item, propose_detail, remainder)
    })
}
const link_remander = (item: t_tree, remainder?: t_remainder_stick[]) => {
  const _remainder = remainder?.filter((r) => r.balance > 0 && r.from_propose_detail === item.id)
  _remainder?.forEach((r) => {
    const remainder_leap: t_tree = { remainder_length: r.length, remainder_qty: r.qty }
    item.children?.push(remainder_leap)
  })
}
onMounted(() => {
  const stick_propose: stick_propose_group[] = useDbStore().stick_propose
  tableData.value = stick_propose
  if (stick_propose.length > 0) loadCurrent(stick_propose[0])
})
</script>
<style>
.el-tabs__content {
  height: calc(100% - 40px);
  overflow: auto;
}
.el-tab-pane {
  height: 100%;
  overflow: auto;
}
</style>
